<template>
    <div>
      <Header/>
      <div class="content">
        <input 
          type="text" 
          class="addTodo"
          placeholder="接下来要做什么？" 
          @keyup.enter="addTodo"
        />
        <Item :todos="filterTodos" @del="del" />
        <Info :filter="filter" :todos="todos" 
          @toggleFilter="toggleFilter" 
          @destory="destory"
        />
      </div>
      <Footer/>
    </div>
</template>
<script>
import Header from './todo/header.jsx'
import Item from './todo/item.vue'
import Info from './todo/info.vue'
import Footer from './todo/footer.jsx'

let id = 0;
export default {
  data() {
    return {
      test: "hello world ",
      todos: [],
      filter: 'all'
    }
  },
  components: {
    Footer, Header, Item, Info
  },
  computed: {
    filterTodos(){
      if(this.filter === 'all'){
        return this.todos
      }
      const completed = this.filter === 'completed';
      return this.todos.filter(v => v.completed === completed)
    }
  },
  methods: {
    addTodo(e){
      let value = e.target.value;
      if(!value) return false;  
      this.todos.unshift({
        id: id++,
        content: value,
        completed: false
      })
      e.target.value = ''
    },
    del(id){
      this.todos.splice(this.todos.findIndex(v => v.id == id), 1)
    },
    toggleFilter(key){
      this.filter = key  
    },
    destory(){
      this.todos = this.todos.filter(v => !v.completed)      
    }
  }
};
</script>
<style lang="scss" scoped>
.content{
  background: #fff;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .addTodo{
    flex: 1;
    appearance: none;
    font-size: 30px;
    padding-left: 30px;
    border: none;
    outline:none;
    height: 80px;
  }
}
</style>

